<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
  <div class="container-fluid">
    <div class="card">
      <div class="card-body">
        <div class="col-12 p-0 mb-4">
          <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 用户列表</p>
        </div>
        <div class="col-12 form-inline">
          <span>手机号/真实姓名/用户昵称&emsp;&emsp;</span><input type="text" class="form-control col-2"></input>
        </div>
        <div class="col-12 form-inline mt-4">
          <span>会员等级&emsp;</span>
          <select class="form-control" style="width: 200px">
            <option>hanhan</option>
            <option>hanhan2</option>
          </select>&emsp;
          <span>用户身份&emsp;</span>
          <select class="form-control" style="width: 200px">
            <option>hanhan</option>
            <option>hanhan2</option>
          </select>
          <button type="button" class="btn btn-primary ml-5">搜索</button>
        </div>

        <div class="col-12 mt-4">
          <table class="table table-striped table-hover" >
            <thead>
            <tr>
              <th>ID</th>
              <th>用户昵称</th>
              <th>真实姓名</th>
              <th>手机号</th>
              <th>会员等级</th>
              <th>积分</th>
              <th>余额</th>
              <th>注册时间</th>
              <th>是否拉黑</th>
              <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr>
              <td>1</td>
              <td>憨憨</td>
              <td>李红华</td>
              <td>17680556642</td>
              <td style="color: #C95A0A"><i>VIP1</i></td>
              <td>32</td>
              <td>30.00</td>
              <td>2021-10-13</td>
              <td>
                <el-switch v-model="status" />
              </td>
              <td>
                <button type="button" class="btn btn-outline-danger btn-sm" ><span style="font-size: 13px">删除</span></button>
              </td>
            </tr>
            </tbody>
          </table>
          <!--分页组件-->
          <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>

      </div>
    </div>
  </div>


  </div>
</template>

<script>
export default {
  name: "UserSearchList",
  data(){
    return{
      status:false
    }
  }
}
</script>

<style scoped>

</style>
